<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  // 头部布局
  .top {
    width: 100%;
    height: 2.5rem;
    display: flex;
     
    .search {
      width: 80%;
      height: 100%;
      border: 1px solid #5bd981;
      border-radius: 2rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-left: 0.9375rem;
      margin-top: .3rem;
      .icon{
       width: 2rem;
       height: 2rem;
       margin-left: 0.5rem;
       .icon1{
        width: 1.5rem;
       }
      }
      .input {
        flex: 1;
        margin-left: .1rem;
       
      }
      .btn {
        width: 3.3rem;
        height: 91%;
       background: #2aba88;
        border-radius:1.5rem;
        margin-left: 2rem;
        position: relative;
        button {
          border: none;
          position: absolute;
          left: 0.6rem;
          top: 0.3rem;
          background: none;
          color: #fff;
        }
      }
    }
    .van-swipe{
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      .van-swipe-item{
        width: 100%;
        height: 20px;
       
       line-height: 2.375rem;
       overflow: hidden;
      }
    }
    .sign-in {
      margin-left: 0.625rem;
      margin-top: .5rem;
      img {
        width: 2.3rem;
        height: 2.3rem;
      }
    }
  }
  // 认证机构文本
  .text {
    width: 100%;
    height: 3.1rem;

    display: flex;
    justify-content: space-between;
    span {
      color: #999999;
      margin: 0.9375rem;
      font-size: 0.81rem;
    }
  }
  // 快速问诊
  .banner {
    width: 100%;
    height: 11.5625rem;
    display: flex;
    justify-content: space-between;

    .left {
      width: 49%;
      height: 85%;
      background: #fff;
      margin-left: 0.625rem;
      .title {
        margin-top: 1.3rem;
        font-size: 1.25rem;
      }
      .desc {
        margin-top: 0.625rem;
        font-size: 14px;
        color: #999999;
      }
      div {
        margin-top: 0.3125rem;
        img {
          width: 100%;
          height: 6.2rem;
        }
      }
    }
    // 找医生
    .right {
      width: 44%;
      height: 100%;
     margin-right: .5rem;
      position: relative;
      .more {
        position: absolute;
       right: 0;
        z-index: 999;

        img {
          width: 2rem;
          height: 1rem;
        }
      }
      // 找医生
      .right-top {
        width: 100%;
        height: 45%;
        background: #fff;
        position: absolute;
        top: 0;

        dl {
          width: 100%;
          height: 100%;

          dt {
            width: 100%;
            position: relative;
            img {
              width: 3.3rem;
              height: 2.1rem;
              position: absolute;
              right: 0.2rem;
              top: 0.3rem;
            }
          }
          .title {
            margin-top: 0.9375rem;
            font-size: 1.2rem;
            margin-left: .5rem;
          }
          .desc {
            margin-top: 0.5rem;
            font-size: 0.75rem;
            color: #999999;
            margin-left: .5rem;
            
          }
        }
      }
      // 送药上门
      .right-bottom {
        width: 100%;
        height: 44%;
        position: absolute;
        top: 5.8rem;
        background: #fff;
        dl {
          width: 100%;
          height: 100%;

          dt {
            width: 100%;
            position: relative;
            margin-left: .2rem;
            img {
              width: 3.2rem;
              height: 2.3rem;
              position: absolute;
              right: 0.1875rem;
              top: 0.5rem;
            }
          }
          .title {
            margin-top: 0.625rem;
            margin-left: .5rem;
          font-size: 1.2rem;
          }
          .desc {
            margin-top: 0.4rem;
            font-size: 0.75rem;
            color: #999999;
            margin-left: .2rem;
          }
        }
      }
    }
  }
  // 轮播
  .swiper {
    width: 100%;
    height: 7rem;
    margin-top: 0.625rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 图文急诊
  .main {
    width: 100%;
    height: 10rem;
    background: #fff;
    overflow-x: scroll;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
    align-items: center;
    
    .grid-item {
      height:3.5rem;
      width: 4.3rem;
     
     
      dt {
        text-align: center;
        img {
       width: 1.7rem;
       height: 1.6rem;
          
        }
      }
      dd {
        font-size: 14px;
        text-align: center;
      }
    }
  }
  .zkmz {
    width: 100%;
    height: 12rem;
    background: #fff;
    margin-top: 0.625rem;

    .title {
      margin-top: 1.5625rem;
      font-size: 1.25rem;
    }
    .desc {
      margin-top: 0.625rem;
      font-size: 14px;
      color: #999999;
    }
    p .img {
      display: flex;
      margin-top: 0.625rem;
      img {
        width: 45%;
        margin-left: 0.625rem;
      }
    }
  }
  // 精选医生
  .jxdoctor {
    width: 100%;
    height: 13rem;
    background: #fff;
    li {
      position: relative;

    }
    .top-doctor {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 0.625rem;
      .title {
        margin-top: 1rem;
        font-size: 1.25rem;
        display: flex;
        justify-content: space-between;
      }
      .desc {
        margin-top: 1rem;
        font-size: 14px;
        color: #999999;
      }
    }
    .dddoctor {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .doctor-name {
        width: 100%;
        height: 10rem;
        margin-top: 15px;
        display: flex;
        li img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          border: 1px solid green;
          margin-left: 0.9rem;
          margin-right: 0.9rem;
        }
        li .desc {
          color: #666666;
          font-size: 0.75rem;
          width: 3rem;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        li .descc {
          color: #666666;
          font-size: 0.75rem;
        }
        .onLine {
          position: absolute;
          left: 1.6rem;
          top: 1.8rem;
          font-size: 0.3rem;
          background: #5bd981;
          color: #fff;
        }
      }
    }
  }
  //  特色服务
  .tsServer {
    width: 100%;
    height: 32rem;
  margin-top: 0.625rem;
  background: #fff;
    .top-doctor {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .title {
        margin-top: 0.8rem;
        font-size: 1.56rem;
        margin-left: .4rem;
      }
      .desc {
        margin-top: 1.4rem;
        font-size: .875rem;
        color: #999999;
        margin-right: .8rem;

      }
      .docfa{
        margin-top: 1.5rem;
       margin-right: 2.2rem;
        font-size: 0.75rem;
        color: #999999;
      }
    }
    .doctor-name {
      width: 100%;
      height: 40rem;
      background: skyblue;
    }
    .img {
      width: 100%;
    
      margin-top: 1rem;
      .fk-img {
        width: 100%;
        height: 11rem;
        display: flex;
        justify-content: space-around;
        img {
          width: 11.5rem;
          height: 100%;
            border-radius: .1rem;
        }
      }
      .pf-img {
        width: 100%;
        height: 6.5rem;
        display: flex;
        justify-content: space-around;
        margin-top: 0.31rem;
        img {
          width: 11.3rem;
          height: 6rem;
          border-radius: .1rem;
        }
      }
      .gz-img {
        width: 100%;
        display: flex;
        justify-content: space-around;
        img {
          width: 7.6rem;
            border-radius: .1rem;
        }
      }
    }
  }
  .tab-doctor {
    width: 100%;
 
    div{
      width: 100%;
     
    }
  }
}
</style>
<template>
  <div class="container">
    <div class="top">
      <!-- 搜索框 -->
      <div class="search">
        <!-- 搜索图标 -->
        <div class="icon">
          <svg
            t="1733900275213"
            class="icon1"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1484"
            width="30"
            height="30"
            
          >
            <path
              d="M512 858.3168c-194.816 0-352-166.2464-352-370.4832S317.184 117.3504 512 117.3504s352 166.2464 352 370.4832-157.184 370.4832-352 370.4832z m0-64c158.6688 0 288-136.8576 288-306.4832 0-169.6768-129.3312-306.4832-288-306.4832S224 318.1568 224 487.8336c0 169.6256 129.3312 306.4832 288 306.4832zM717.312 799.9488a32 32 0 0 1 46.4896-43.9808l91.4432 96.7168a32 32 0 0 1-46.4896 43.9808l-91.4432-96.768z"
              fill="#5bd981"
              p-id="1485"
            ></path>
          </svg>
        </div>
        <div class="input">
          <!-- 搜索框轮播图 -->
          <van-swipe
            :autoplay="3000"
            style="height: 45px"
            width="100%"
            vertical
            class="van-swipe"
            :show-indicators="false"
          >
            <van-swipe-item>阿达帕林凝胶</van-swipe-item>
            <van-swipe-item>肺炎</van-swipe-item>
            <van-swipe-item>眼科</van-swipe-item>
            <van-swipe-item>湿疹</van-swipe-item>
            <van-swipe-item>输入疾病|药品|症状|医生</van-swipe-item>
          </van-swipe>
          <!-- <input type="text" placeholder="易坦静"> -->
        </div>

        <div class="btn">
          <button>搜索</button>
        </div>
      </div>
      <!-- 右侧签到图 -->
      <div class="sign-in">
        <img src="../../../public/image/top-qd.png" alt="" />
      </div>
    </div>
    <div class="text">
      <span><img src="../../../public/image/yes.png" alt="" /> 国家卫健委认证医疗机构</span>
      <span>1.80亿用户信赖</span>
    </div>
    <div class="banner">
      <div class="left">
        <p class="title">快速问诊</p>
        <p class="desc">7x24小时 智能匹配医生</p>
        <div><img src="../../../public/image/left-1.png" alt="" /></div>
      </div>
      <div class="right">
        <p class="more"><img src="../../../public/image/rightt-t2.png" alt="" /></p>
        <!-- 找医生 -->
        <div class="right-top">
          <dl>
            <dt><img src="../../../public/image/left-2.png" alt="" /></dt>
            <dd class="title">找医生</dd>
            <dd class="desc">全国66万医生任你选</dd>
          </dl>
        </div>
        <!-- 送药上门 -->
        <div class="right-bottom">
          <dl>
            <dt><img src="../../../public/image/left-3.png" alt="" /></dt>
            <dd class="title">送药上门</dd>
            <dd class="desc">全国发货 正品保障</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../../../public/image/lb1.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../../public/image/lb2.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../../public/image/lb3.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../../public/image/lb4.png" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="main">
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner1.png" alt="" /></dt>
        <dd>图文急诊</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../../../public/image/banner11.png" alt="" /></dt>
        <dd>电话问诊</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner12.png" alt="" /></dt>
        <dd>春雨慧问</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner15.png" alt="" /></dt>
        <dd>自诊自查</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner13.png" alt="" /></dt>
        <dd>找医院</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner3.png" alt="" /></dt>
        <dd>检查早筛</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner4.png" alt="" /></dt>
        <dd>健康测评</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner10.png" alt="" /></dt>
        <dd>视频问诊</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner14.png" alt="" /></dt>
        <dd>儿科门诊</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner5.png" alt="" /></dt>
        <dd>问诊开药</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner6.png" alt="" /></dt>
        <dd>权威专家</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner7.png" alt="" /></dt>
        <dd>特惠义诊</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner8.png" alt="" /></dt>
        <dd>就医陪诊</dd>
      </dl>
      <dl class="grid-item">
        <dt><img src="../.././../public/image/banner9.png" alt="" /></dt>
        <dd>疫苗预约</dd>
      </dl>
    </div>
    <div class="zkmz">
      <p><span class="title">专科门诊</span><span class="desc">春雨高复诊率、高口碑名医</span></p>
      <p>
        <span class="img"
          ><img src="../../../public/image/man-ke.png" alt="" /><img
            src="../../../public/image/chun.png"
            alt=""
        /></span>
      </p>
    </div>
    <!-- 精选医生 -->
    <selectDoctor></selectDoctor>
    <!-- 特色服务 -->
    <div class="tsServer">
      <div class="top-doctor">
        <span class="title">特色服务</span>
        <span class="docfa">一站式医疗健康解决方案</span>
        <span class="desc">查看更多></span>
      </div>
      <div class="img">
        <p class="fk-img">
          <img src="../../../public/image/tsServer-1.png" alt="" /><img
            src="../../../public/image/tsServer-2.png"
            alt=""
          />
        </p>
        <p class="pf-img">
          <img src="../../../public/image/tsServer-3.png" alt="" /><img
            src="../../../public/image/tsServer-4.png"
            alt=""
          />
        </p>
        <p class="gz-img">
          <img src="../../../public/image/tsServer-5.png" alt="" /><img
            src="../../../public/image/tsServer-6.png"
            alt=""
          /><img src="../../../public/image/tsServer-7.png" alt="" />
        </p>
      </div>
    </div>
    <div class="tab-doctor">
      <van-tabs v-model:active="active">
        <van-tab title="热点">
          <!-- <div class="docto-list" @click="goDetail(item)">
       <dl>
        <dt><img src="../../../public/image/list-img1.png" alt=""></dt>
        <dd>实打实打算反对法地方</dd>
        <dd>生活 11月29日</dd>
    </dl>
    
     </div> -->

          <div>
         <Tab1></Tab1>
          </div>
        </van-tab>
        <van-tab title="专家科普">
           <div>
         <Tab1></Tab1>
          </div>
        </van-tab>
        <van-tab title="生活">
           <div>
         <Tab1></Tab1>
          </div>
        </van-tab>
        <van-tab title="母婴">
           <div>
         <Tab1></Tab1>
          </div>
        </van-tab>
        <van-tab title="辟谣">
           <div>
         <Tab1></Tab1>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import Tab1 from '../../components/tab1/index.vue'
// 精选医生
import selectDoctor from '../../components/selectDoctor/index.vue'
// 精选医生
import {getSelectDocter} from '../../api/http'
//精选医生
const firstData = ref<any[]>([])
 getSelectDocter().then((res:any)=>{
  firstData.value = res.data.doctors
 })
//首页列表热点
const listData = ref<any[]>([])
const LastList = async () => {
  const res = await axios.get('/static/cooperation/wap/health_news/', {
    params: {
      from_wx_mini: '1',
      page: '1',
      partner: 'chunyu_wap_mini',
      release_time: '2020-04-22%2010%3A30%3A00',
      channel_id: '0'
    }
  })
  console.log(res.data.content_list)
  listData.value = res.data.content_list
}

// 上拉加载
LastList()
//精选医生跳转详情页
const router = useRouter()
const goDetail = (item: any) => {
  console.log(item)
  router.push({
    path:'/selectedDetail',
    query:{
      item:JSON.stringify(item)
    }
  })
}
const active = ref(0)
</script>
